import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    FileOutlined,
    PieChartOutlined,
    DesktopOutlined,
    TeamOutlined,
    UserOutlined,
} from '@ant-design/icons';
import React, { useState } from 'react';
import { Layout, Menu, theme } from 'antd';
import '../../css/index/index-module.scss'
import { Outlet,useNavigate } from 'react-router-dom'
const { Header, Sider, Content } = Layout;
function getItem(label, key, icon, children) {
    return {
        key,
        icon,
        children,
        label,
    };
}
const items = [
    getItem('首页', '/index/home', <PieChartOutlined />),
    getItem('访客纪录', 'sub1', <DesktopOutlined />, [
        getItem('访客列表', '/index/visitorsList'),
        getItem('访客添加修改', '/index/visitorsadd'),
        getItem('负责人操作导入详情', '1'),
    ]),
    getItem('部门管理', 'sub2', <UserOutlined />, [
        getItem('部门列表', '2'),
        getItem('部门添加修改', '3'),
    ]),
    getItem('管理员', 'sub3', <TeamOutlined />, [
        getItem('管理员列表', '4'),
        getItem('管理员添加修改', '5')
    ]),
    getItem('销核人员管理', 'sub4', <TeamOutlined />, [
        getItem('销核人员列表', '6'),
        getItem('销核人员添加修改', '7'),
        getItem('销核人员日志', '8')
    ]),
    getItem('审核日志', 'sub5', <TeamOutlined />, [
        getItem('审核列表', '9'),
    ]),
    getItem('校园动态', 'sub6', <TeamOutlined />, [
        getItem('校园动态列表', '10'),
        getItem('校园动态添加修改', '11')
    ]),
    getItem('设置', '12', <FileOutlined />),
];

const Home = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {token: { colorBgContainer }} = theme.useToken();
    const nasigate = useNavigate()
    return (
        <div>
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo" />
                    <Menu  theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} onSelect={(e)=>{
                        console.log(e);
                        nasigate(e.keyPath[0])}} />
                </Sider>
                <Layout className="site-layout">
                    <Header 
                        style={{
                            paddingLeft: 10,
                            background: colorBgContainer,
                        }}
                    >
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: () => setCollapsed(!collapsed),
                        })}
                        <div className='site-home'>
                            首页
                        </div>
                    </Header>
                    <Content className='content'
                        style={{
                            paddingTop:20,
                            background: colorBgContainer,
                        }}
                    >
                        <Outlet></Outlet>
                        
                    </Content>
                </Layout>
            </Layout>
        </div>
    );
}

export default Home;
